<template>
  <div class="app-container">
    <el-collapse-transition>
      <el-card v-show="isFilterVisible" class="search-wrapper">
        <el-form :model="selCaseListQuery" :inline="true" label-width="100px">
          <div class="form-row">
            <el-form-item label="项目名称:">
              <el-input
                v-model="selCaseListQuery.PName"
                clearable
                style="width: 177px"
                placeholder="请输入项目名称"
              />
            </el-form-item>
            <el-form-item label="客户单位:">
              <!-- <el-select
                @change="handleCustomerChange"
                clearable
                v-model="selCaseListQuery.customer"
                placeholder="请选择客户单位"
                style="width: 177px"
              >
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="item in customerUnits"
                  :key="item.id"
                ></el-option>
              </el-select> -->
              <el-input
                v-model="selCaseListQuery.customer"
                style="width: 177px"
                placeholder="请输入客户单位"
              />
            </el-form-item>
            <el-form-item label="合同编码:">
              <el-input
                v-model="selCaseListQuery.no"
                clearable
                style="width: 177px"
                placeholder="请输入合同编码"
              />
            </el-form-item>

            <el-form-item label="项目状态:">
              <el-select
                v-model="selCaseListQuery.status"
                clearable
                style="width: 177px"
                placeholder="请选择项目状态"
                @change="handleProjectStatusChange"
              >
                <el-option
                  v-for="item in projectStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleQuery"
              >搜索</el-button>
              <el-button
                icon="el-icon-refresh"
                @click="resetQuery"
              >重置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-card>
    </el-collapse-transition>
    <el-card>
      <div>
        <!-- 顶部操作按钮 -->
        <div class="operation-container">
          <el-button
            type="primary"
            size="small"
            class="filter-trigger"
            @click="isFilterVisible = !isFilterVisible"
          >{{ isFilterVisible ? "收起" : "检索" }}
            <i
              :class="['el-icon-arrow-down', { 'is-reverse': isFilterVisible }]"
            />
          </el-button>
          <!-- <el-button
            type="primary"
            size="small"
            icon="el-icon-printer"
            @click="handlePrint"
          >打印</el-button> -->
          <!-- <el-dropdown>
            <el-button type="primary" size="small">
              预览/打印<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>打印预览</el-dropdown-item>
              <el-dropdown-item>直接打印</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
          <!-- <el-button type="success" icon="el-icon-back" size="small"
            >撤回</el-button
          > -->
          <!-- <div style="float: right">
            <el-dropdown>
              <el-button type="primary" size="small">
                导入/导出<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>导入</el-dropdown-item>
                <el-dropdown-item>导出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div> -->
        </div>

        <!-- 表格 -->
        <el-table
          v-loading="loading"
          :data="projectInputList"
          border
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="prop"
            label="序号"
            type="index"
            width="80"
          />
          <el-table-column
            align="center"
            prop="no"
            label="合同编号"
            width="120"
          />
          <el-table-column
            width="270"
            prop="pname"
            label="项目名称"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="customer"
            label="客户单位"
            width="270"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="customerType"
            label="客户类型"
            width="100"
            align="center"
          />
          <el-table-column
            prop="money"
            label="合同金额(元)"
            width="120"
            align="center"
          />
          <el-table-column
            align="center"
            prop="status"
            label="项目状态"
            width="100"
          >
            <template slot-scope="scope">
              <el-tag
                :type="
                  getProjectStatusType(scope.row.status, scope.row.prStatus)
                "
              >{{
                getProjectStatus(scope.row.status, scope.row.prStatus)
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="width"
            align="center"
          >
            <template slot-scope="scope">
              {{ formatCreateTime(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="width" align="center">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="warning"
                :disabled="isCompleteButtonDisabled(scope.row)"
                @click="handleComplete(scope.row)"
              >办结</el-button>
              <el-button
                size="small"
                type="primary"
                @click="handleDetail(scope.row)"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-row :gutter="10" style="margin-top: 20px" type="flex" justify="end">
        <el-pagination
          background
          :current-page="selCaseListQuery.page"
          :page-size="selCaseListQuery.pageSize"
          :page-sizes="[10, 20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>

    <!-- 办结弹窗 -->
    <el-dialog title="办结" :visible.sync="CompleteVisible" width="87%">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目类型" prop="ptype">
              <!-- <el-input
                v-model="formData.no"
                placeholder="请输入合同编号"
              ></el-input> -->
              <el-select
                v-model="formData.ptype"
                clearable
                placeholder=""
                style="width: 100%"
              >
                <!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option> -->
                <el-option label="传媒中心" value="传媒中心" />
                <el-option label="仑传公司" value="仑传公司" />·
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目采购方式" prop="projectFrom">
              <!-- <el-input
                v-model="formData.pName"
                placeholder="请输入项目来源"
              ></el-input> -->
              <el-select
                v-model="formData.projectFrom"
                clearable
                placeholder=""
                style="width: 100%"
              >
                <el-option
                  v-for="item in projectFroms"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同编号" prop="no">
              <el-input
                v-model="formData.no"
                disabled
                placeholder="请输入合同编号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="pname">
              <el-input
                v-model="formData.pname"
                clearable
                placeholder="请输入项目名称"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户类型" prop="customerType">
              <el-select
                v-model="formData.customerType"
                clearable
                style="width: 100%"
                placeholder="请选择客户类型"
              >
                <el-option
                  v-for="item in projectTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户单位" prop="customer">
              <!-- <el-select
                clearable
                v-model="formData.customer"
                placeholder="请选择客户单位"
                style="width: 100%"
              >
                <el-option
                  :label="item.name"
                  :value="item.name"
                  v-for="item in customerUnits"
                  :key="item.id"
                ></el-option>
              </el-select> -->
              <el-input
                v-model="formData.customer"
                style="width: 100%"
                placeholder="请输入客户单位"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="金额" prop="money">
              <el-input v-model="formData.money" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行时间" prop="duration">
              <el-date-picker
                v-model="formData.duration"
                clearable
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 100%"
                @change="handleDurationChange"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目领域" prop="projectArea">
              <el-select
                v-model="formData.projectArea"
                clearable
                style="width: 100%"
                placeholder="请选择项目领域"
              >
                <el-option
                  v-for="item in projectAreas"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存量类型" prop="stockType">
              <el-select
                v-model="formData.stockType"
                clearable
                style="width: 100%"
                placeholder="请选择存量类型"
              >
                <el-option label="存量" value="存量" />
                <el-option label="增量" value="增量" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目负责人" prop="salesman">
              <el-input
                v-model="formData.salesman"
                clearable
                style="width: 100%"
                placeholder="请输入项目负责人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目奖励" prop="manageRate">
              <el-select
                ref="editManageRateSelect"
                v-model="formData.manageRate"
                style="width: 100%"
                clearable
                filterable
                allow-create
                default-first-option
                @blur="handleEditManageRateBlur"
                @change="handleEditManageRateChange"
              >
                <el-option
                  v-for="item in manageRateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="内容及要求" prop="content">
          <el-input
            v-model="formData.content"
            type="textarea"
            :rows="4"
            placeholder="请输入内容及要求"
          />
        </el-form-item>
        <el-divider />
        <!-- 项目类型表格 -->
        <div class="project-type-section">
          <div class="section-title">项目类型</div>
          <el-table
            :data="formData.lppStr"
            border
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column label="平台产品IP" prop="platform" width="width">
              <template slot-scope="scope">
                <!-- <el-input v-model="scope.row.platform"></el-input> -->
                <el-select
                  v-model="scope.row.platform"
                  placeholder="请选择平台"
                >
                  <el-option
                    v-for="item in selPlatformLists"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="执行事业部" prop="department" width="170">
              <template slot-scope="scope">
                <!-- <el-input v-model="scope.row.department"></el-input> -->
                <el-select
                  v-model="scope.row.department"
                  placeholder="请选择执行事业部"
                >
                  <el-option
                    v-for="item in selDepartmentLists"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="执行内容及要求"
              prop="content"
              width="200"
              align="center"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.content"
                  type="textarea"
                  :rows="7"
                  placeholder="请输入执行内容及要求"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="属性"
              prop="attribute"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                <!-- <el-input v-model="scope.row.attribute"></el-input> -->
                <el-select
                  v-model="scope.row.attribute"
                  placeholder="请选择属性"
                >
                  <el-option
                    v-for="item in selProjectTypeLists"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="金额"
              prop="money"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.money"
                  placeholder="请输入金额"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="成本"
              prop="estimatedCost"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                <el-input
                  v-model.number="scope.row.estimatedCost"
                  placeholder="请输入成本"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="transferCompany"
              label="划转对象"
              align="center"
              width="width"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.transferCompany"
                  disabled
                  placeholder=""
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="transferMoney"
              label="划转金额"
              align="center"
              width="width"
            >
              <template slot-scope="scope">
                <el-input
                  v-model.number="scope.row.transferMoney"
                  disabled
                  placeholder=""
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="width" align="center">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  size="mini"
                  @click="removeProjectType(scope.$index)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 10px">
            <el-button
              type="primary"
              size="small"
              @click="addProjectType"
            >添加项目类型</el-button>
          </div>
        </div>

        <el-card style="margin-top: 20px; margin-bottom: 20px">
          <!-- <div slot="header"></div> -->
          <div style="border: 2px solid #ebeef5">
            <div class="contract-info">
              <div class="info-item">
                <div class="info-label">合同电子版</div>
                <div class="info-content">
                  <a
                    v-if="formData.contractFile"
                    :href="formData.contractFile"
                    class="download-link"
                    @click.prevent="handleFileDownload(formData.contractFile)"
                  >
                    {{ getFileName(formData.contractFile) }}(点击下载文件)
                  </a>
                  <div class="button-group">
                    <el-button
                      type="primary"
                      size="small"
                      @click="handleFileDownload(formData.contractFile)"
                    >下载</el-button>
                    <el-button
                      size="small"
                      @click="handlePreview"
                    >预览</el-button>
                  </div>
                </div>
              </div>
              <div class="info-item">
                <div class="info-label">负责人备注</div>
                <div class="info-content">
                  {{ formData.remarks || "" }}
                </div>
              </div>
            </div>
          </div>
        </el-card>

        <el-form-item label="完成概述" prop="describe">
          <el-input
            v-model="formData.describe"
            clearable
            type="textarea"
            :rows="7"
            placeholder="请输入完成概述"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="CompleteVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
        <!-- <el-button type="primary" @click="handleSave">保存</el-button> -->
      </div>
    </el-dialog>

    <!-- 查看详情弹框 -->
    <el-dialog
      :visible.sync="detailDialogVisible"
      width="87%"
      title="查看详情"
      custom-class="full-height-dialog"
    >
      <div id="printArea" class="dialog-content-wrapper">
        <!-- <el-collapse v-model="activeNames">
          <el-collapse-item name="1">
            <template #title> -->
        <div class="collapse-header">
          <h3>北仑区传媒中心经营项目立项</h3>
          <!-- <span class="view-btn">点击查看</span> -->
        </div>
        <!-- </template> -->
        <el-card>
          <!-- <div slot="header"></div> -->
          <div>
            <div class="detail-content">
              <div class="contract-no">合同编号：{{ projectDetail.no }}</div>
              <el-form label-width="100px" class="detail-form">
                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="项目名称">
                      <el-input v-model="projectDetail.pname" disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目采购方式">
                      <el-input
                        v-model="projectDetail.projectFrom"
                        disabled
                        style="width: 100%"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="客户类型">
                      <el-input v-model="projectDetail.customerType" disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="客户单位">
                      <el-input v-model="projectDetail.customer" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="项目领域">
                      <el-input v-model="projectDetail.projectArea" disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <!-- <el-form-item label="是否重点客户">
                      <el-input v-model="projectDetail.isImportant" disabled />
                    </el-form-item> -->
                    <el-form-item label="项目负责人">
                      <el-input v-model="projectDetail.salesman" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="存量类型">
                      <el-input
                        v-model="projectDetail.stockType"
                        disabled
                        style="width: 100%"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="执行时间">
                      <el-input v-model="projectDetail.duration" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="项目成本">
                      <el-input
                        v-model="projectDetail.cost"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="合同金额">
                      <el-input v-model="projectDetail.money" disabled>
                        <template slot="append">元</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <!-- <el-form-item label="是否立项">
                      <el-input v-model="projectDetail.mpSuggest" disabled />
                    </el-form-item> -->
                    <el-form-item label="实际收入">
                      <el-input v-model="projectDetail.receiveMoney" disabled>
                        <template slot="append">元</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否到账">
                      <el-input v-model="projectDetail.isAccount" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="到账金额">
                      <el-input v-model="projectDetail.receiveMoney" disabled>
                        <template slot="append">元</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目奖励">
                      <el-input v-model="projectDetail.manageRate" disabled>
                        <template slot="append">%</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="24">
                    <el-form-item label="内容及要求">
                      <el-input
                        v-model="projectDetail.content"
                        type="textarea"
                        :rows="4"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </el-card>

        <el-card style="margin-top: 20px">
          <!-- <div slot="header"></div> -->
          <div>
            <div class="project-type">
              <div class="type-title">项目类型</div>
              <el-table
                :header-cell-style="{ background: '#f5f7fa' }"
                :data="projectDetail.list || []"
                border
                style="width: 100%"
              >
                <el-table-column
                  prop="platform"
                  label="平台产品IP"
                  width="120"
                  align="center"
                />
                <el-table-column
                  prop="department"
                  label="执行事业部"
                  width="150"
                  align="center"
                />
                <el-table-column
                  prop="content"
                  label="执行内容及要求"
                  width="300"
                  align="center"
                />
                <el-table-column prop="attribute" label="属性" align="center" />
                <el-table-column prop="money" label="金额" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.money || "0" }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="estimatedCost"
                  label="成本"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.estimatedCost || "0" }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="transferCompany"
                  label="划转对象"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.transferCompany || "无" }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="transferMoney"
                  label="划转金额"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.transferMoney || "0" }}
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="transferExplain" label="划转说明">
                  <template slot-scope="scope">
                    {{ scope.row.transferExplain || "0" }}
                  </template>
                </el-table-column> -->
              </el-table>
            </div>
          </div>
        </el-card>

        <el-card style="margin-top: 20px">
          <!-- <div slot="header"></div> -->
          <div style="border: 2px solid #ebeef5">
            <div class="contract-info">
              <div class="info-item">
                <div class="info-label">合同电子版</div>
                <div class="info-content">
                  <a
                    v-if="projectDetail.contractFile"
                    :href="projectDetail.contractFile"
                    class="download-link"
                    @click.prevent="
                      handleFileDownload(projectDetail.contractFile)
                    "
                  >
                    {{ getFileName(projectDetail.contractFile) }}(点击下载文件)
                  </a>
                  <div class="button-group">
                    <el-button
                      type="primary"
                      size="small"
                      @click="handleFileDownload(projectDetail.contractFile)"
                    >下载</el-button>
                    <el-button
                      size="small"
                      @click="handlePreview"
                    >预览</el-button>
                  </div>
                </div>
              </div>
              <div class="info-item">
                <div class="info-label">负责人备注</div>
                <div class="info-content">
                  {{ projectDetail.remarks || "" }}
                </div>
              </div>

              <div class="info-section">
                <div style="border: 1px solid #ccc">
                  <div class="info-row">
                    <div class="info-col">
                      <div
                        class="info-label"
                        style="width: 180px; color: black; font-weight: bold"
                      >
                        项目立项意见
                      </div>
                      <div class="info-content">
                        {{
                          projectDetail.lsuggest
                            ? `${projectDetail.luser}：${
                              projectDetail.lsuggest || ""
                            }`
                            : ""
                        }}
                      </div>
                    </div>
                    <!-- <div class="info-col">
                      <div class="info-label">项目立项人</div>
                      <div class="info-content">
                        {{ projectDetail.luser || "" }}
                      </div>
                    </div> -->
                  </div>
                </div>

                <div style="border: 1px solid #ccc">
                  <div class="info-row full-width">
                    <div class="info-label">完成概述</div>
                    <div class="info-content">
                      {{ projectDetail.describe || "" }}
                    </div>
                  </div>

                  <div class="info-row">
                    <div class="info-col">
                      <div class="info-label">结案人</div>
                      <div class="info-content">
                        {{ projectDetail.createName || projectDetail.salesman }}
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">结案时间</div>
                      <div class="info-content">
                        {{
                          formatCreateTime(projectDetail.endCreateTime) || ""
                        }}
                      </div>
                    </div>
                  </div>
                </div>

                <div style="border: 1px solid #ccc">
                  <div class="info-row full-width">
                    <div class="info-col">
                      <div class="info-label">融合发展事业部意见</div>
                      <div class="info-content">
                        {{
                          projectDetail.rmSuggest
                            ? `${projectDetail.rmUserName}：${
                              projectDetail.rmSuggest || ""
                            }`
                            : ""
                        }}
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">审批时间</div>
                      <div class="info-content">
                        {{ formatCreateTime(projectDetail.rmUserTime) || "" }}
                      </div>
                    </div>
                  </div>

                  <!-- <div class="info-row">
                    <div class="info-col">
                      <div class="info-label">审批人</div>
                      <div class="info-content">
                        {{ projectDetail.rmUserName || "" }}
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">审批时间</div>
                      <div class="info-content">
                        {{ formatCreateTime(projectDetail.rmUserTime) || "" }}
                      </div>
                    </div>
                  </div> -->
                </div>

                <div style="border: 1px solid #ccc">
                  <div class="info-row three-cols">
                    <div class="info-col">
                      <div class="info-label">项目成本</div>
                      <div class="info-content">
                        {{ projectDetail.cost || "0" }}元
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">项目税金</div>
                      <div class="info-content">
                        {{ projectDetail.tax || "0" }}元
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">项目收入</div>
                      <div class="info-content">
                        {{ projectDetail.income || "0" }}元
                      </div>
                    </div>
                  </div>

                  <div class="info-row">
                    <div class="info-col">
                      <div class="info-label">项目奖励</div>
                      <div class="info-content">
                        {{ projectDetail.manageMoney || "0" }}元
                      </div>
                    </div>
                    <!-- <div class="info-col">
                    <div class="info-label">融合发展事业部意见</div>
                    <div class="info-content">{{ projectDetail.rmSuggest || "" }}</div>
                  </div> -->
                  </div>
                </div>

                <div style="border: 1px solid #ccc">
                  <div class="info-row full-width">
                    <div class="info-col">
                      <div class="info-label">运营中心意见</div>
                      <div class="info-content">
                        {{
                          projectDetail.rcenterSuggest
                            ? `${projectDetail.rcenterUserName}：${
                              projectDetail.rcenterSuggest || ""
                            }`
                            : ""
                        }}
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">审批时间</div>
                      <div class="info-content">
                        {{
                          formatCreateTime(projectDetail.rcenterUserTime) || ""
                        }}
                      </div>
                    </div>
                  </div>

                  <!-- <div class="info-row">
                    <div class="info-col">
                      <div class="info-label">审批人</div>
                      <div class="info-content">
                        {{ projectDetail.rcenterUserName || "" }}
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">审批时间</div>
                      <div class="info-content">
                        {{
                          formatCreateTime(projectDetail.rcenterUserTime) || ""
                        }}
                      </div>
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
        <el-button v-print="printObj" type="primary">打印</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  selCaseListApi,
  selProjectByIdApi,
  selNewProjectNoApi,
  addEndCaseApi
} from '@/api/project-input'
import {
  selCustomerTypeListApi, // 客户类型列表查询
  selCustomerUnitListApi, // 客户单位列表查询
  selProjectFromListApi, // 项目来源列表查询
  selProjectAreaListApi, // 项目领域列表查询
  selPlatformListApi, // 平台产品列表查询
  selDepartmentListApi, // 执行事业部列表查询
  selProjectTypeListApi // 项目类型列表查询
} from '@/api/basic-data'
import { selFileUrlApi } from '@/api/uploadFile'
import { mapGetters } from 'vuex'
export default {
  name: 'ProjectInput',
  data() {
    return {
      loading: false,
      projectInputList: [], // 项目列表数据
      isFilterVisible: false,
      total: 0, // 总条数
      no: '', // 项目编号
      // 办结表单
      formData: {
        content: '', // 内容及要求
        contractFile: '', // 合同文件
        createName: '', // 创建人
        customer: '', // 客户单位
        customerType: '', // 客户类型
        duration: '', // 执行时间
        executionFee: '', // 执行费用
        lppStr: [
          {
            attribute: '', // 属性
            content: '', // 内容
            department: '', // 部门
            estimatedCost: '', // 预计成本
            money: '', // 金额
            platform: '', // 平台
            projectIP: '', // 项目IP
            projectNo: '' // 项目编号
          }
        ],
        money: '', // 金额
        no: '', // 编号
        pname: '', // 项目名称
        ptype: '', // 项目类型
        salesman: '', // 项目负责人
        stockType: '', // 存量类型
        projectFrom: '', // 项目采购方式
        projectArea: '', // 项目领域
        manageRate: '', // 管理费率
        operation: '', // 操作
        remarks: '', // 备注
        describe: '', // 完成概述
        sign: null
      },
      // 项目结案列表查询参数
      selCaseListQuery: {
        page: 1,
        pageSize: 10,
        customer: '', // 客户
        no: '', // 项目编号
        PName: '', // 项目名称
        status: 1, // 项目状态
        userId: this.$store.getters.userId // 用户ID
      },
      // 项目状态列表
      projectStatus: [
        { label: '全部', value: 0 },
        { label: '已驳回', value: -1 },
        { label: '待结案', value: 1 },
        { label: '待评审', value: 2 },
        { label: '已结案', value: 3 }
      ],
      customerUnits: [], // 客户单位列表
      // 客户类型列表参数
      selCustomerTypeListQuery: {
        page: 1,
        pageSize: 99,
        name: ''
      },
      durationForSubmit: '',
      // 产品平台查询参数
      selPlatformListQuery: {
        page: 1,
        pageSize: 99,
        name: ''
      },
      uploadUrl: process.env.VUE_APP_BASE_HOME_API + '/filePreview/uploadFile', // 上传地址
      detailDialogVisible: false,
      dialogVisible: false,
      activeNames: [], // 默认不展开
      projectDetail: {}, // 项目详情数据
      CompleteVisible: false, // 办结弹窗
      editdurationForSubmit: '', // 编辑办结日期
      fileList: [], // 文件列表
      editFileList: [], // 编辑文件列表
      rules: {
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        contractFile: [
          { required: true, message: '请上传合同文件', trigger: 'change' }
        ],
        createName: [
          { required: true, message: '请输入创建人名称', trigger: 'blur' }
        ],
        customer: [{ required: true, message: '请输入客户', trigger: 'blur' }],
        // customerType: [
        //   { required: true, message: "请选择客户类型", trigger: "change" },
        // ],
        // duration: [
        //   { required: true, message: "请选择时间", trigger: "change" },
        // ],
        // executionFee: [
        //   { required: true, message: "请输入执行费用", trigger: "blur" },
        //   { type: "number", message: "执行费用必须为数字", trigger: "blur" },
        // ],
        // lppStr: [
        //   { required: true, message: "请添加项目类型", trigger: "change" },
        //   { type: "array", message: "项目类型必须为数组", trigger: "change" },
        // ],
        money: [
          { required: true, message: '请输入金额', trigger: 'blur' }
          // { type: "number", message: "金额必须为数字", trigger: "blur" },
        ],
        no: [
          { required: true, message: '请输入编号', trigger: 'blur' }
          // { type: "integer", message: "编号必须为整数", trigger: "blur" },
        ],
        pname: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        pType: [
          { required: true, message: '请选择项目类型', trigger: 'change' }
          // { type: "integer", message: "项目类型必须为整数", trigger: "blur" },
        ],
        salesman: [
          { required: true, message: '请输入项目负责人', trigger: 'blur' }
        ]
        // stockType: [
        //   { required: true, message: "请选择库存类型", trigger: "change" },
        // ],
      },
      initialFormData: null, // 添加此项用于存储表单的初始状态
      manageRateOptions: [
        { label: '0%', value: '0' },
        { label: '30%', value: '30' }
      ],
      printObj: {
        id: 'printArea',
        popTitle: '项目结案详情',
        preview: false,
        extraCss: '',
        beforeEntryIframe() {
          try {
            // 获取打印区域
            const printArea = document.getElementById('printArea')
            if (!printArea) return

            // 添加更强制的边框样式
            const styleElement = document.createElement('style')
            styleElement.id = 'print-style-temp'
            styleElement.textContent = `
              /* 整个表格添加边框 */
              #printArea .el-table {
                border: 1px solid #dcdfe6 !important;
                border-collapse: collapse !important;
                border-spacing: 0 !important;
              }
              
              /* 特别强制的单元格边框样式 */
              #printArea .el-table th.el-table__cell,
              #printArea .el-table td.el-table__cell {
                border-top: 1px solid #dcdfe6 !important;
                border-right: 1px solid #dcdfe6 !important;
                border-bottom: 1px solid #dcdfe6 !important;
                border-left: 1px solid #dcdfe6 !important;
              }
              
              /* 确保表头背景色 */
              #printArea .el-table th.el-table__cell {
                background-color: #f5f7fa !important;
              }
              
              /* 移除干扰元素 */
              #printArea .el-table::before,
              #printArea .el-table::after,
              #printArea .el-table .el-table__fixed::before,
              #printArea .el-table .el-table__fixed::after {
                display: none !important;
              }
            `
            document.head.appendChild(styleElement)

            // 处理表格宽度和列组
            const tableNode = printArea.querySelectorAll(
              '.el-table__header,.el-table__body'
            )
            tableNode.forEach((tableItem) => {
              tableItem.style.width = '100%'
              tableItem.style.borderCollapse = 'collapse'
              tableItem.style.borderSpacing = '0'

              // 设置表格列宽比例
              const colgroup = tableItem.querySelector('colgroup')
              if (colgroup) {
                colgroup.innerHTML = ''

                const widths = [
                  '11.2%', // 150px -> 11.2%
                  '14.9%', // 200px -> 14.9%
                  '22.4%', // 300px -> 22.4%
                  '11.2%', // 150px -> 11.2%
                  '8.9%', // 120px -> 8.9%
                  '8.9%', // 120px -> 8.9%
                  '11.2%', // 150px -> 11.2%
                  '11.2%' // 150px -> 11.2%
                ]

                widths.forEach((width) => {
                  const col = document.createElement('col')
                  col.style.width = width
                  colgroup.appendChild(col)
                })
              }
            })

            // 使用setTimeout确保在DOM完全渲染后执行
            setTimeout(() => {
              // 直接操作DOM，强制设置边框样式
              const tables = printArea.querySelectorAll('.el-table')
              tables.forEach((table) => {
                table.style.border = '1px solid #dcdfe6'
                table.style.borderCollapse = 'collapse'
                table.style.borderSpacing = '0'

                // 处理所有单元格
                const cells = table.querySelectorAll(
                  'th.el-table__cell, td.el-table__cell'
                )
                cells.forEach((cell) => {
                  // 为每个边单独设置边框
                  cell.style.setProperty(
                    'border-top',
                    '1px solid #dcdfe6',
                    'important'
                  )
                  cell.style.setProperty(
                    'border-right',
                    '1px solid #dcdfe6',
                    'important'
                  )
                  cell.style.setProperty(
                    'border-bottom',
                    '1px solid #dcdfe6',
                    'important'
                  )
                  cell.style.setProperty(
                    'border-left',
                    '1px solid #dcdfe6',
                    'important'
                  )
                })

                // 表头单元格额外处理
                const headerCells = table.querySelectorAll('th.el-table__cell')
                headerCells.forEach((cell) => {
                  cell.style.setProperty(
                    'background-color',
                    '#f5f7fa',
                    'important'
                  )
                  // 确保内容不会覆盖边框
                  const cellContent = cell.querySelector('.cell')
                  if (cellContent) {
                    cellContent.style.padding = '5px'
                  }
                })
              })
            }, 200) // 增加延迟时间，确保DOM完全渲染
          } catch (error) {
            console.error('Error in beforeEntryIframe:', error)
          }
        },
        closeCallback(vue) {
          console.log('关闭了打印工具')
          // 移除临时样式
          const tempStyle = document.getElementById('print-style-temp')
          if (tempStyle) {
            tempStyle.parentNode.removeChild(tempStyle)
          }
        }
      }
    }
  },
  created() {
    this.selCaseList()
    this.selPlatformList() // 平台产品列表
    this.selDepartmentList() // 执行事业部列表
    this.selProjectTypeList() // 项目类型列表
    this.selCustomerTypeList() // 客户类型列表
    this.selCustomerUnitList() // 客户单位列表
    this.selProjectFromList() // 项目来源列表
    this.selProjectAreaList() // 项目领域列表
  },
  computed: {
    ...mapGetters(['userId'])
  },
  watch: {
    'formData.ptype': {
      async handler(newVal) {
        console.log(newVal)

        if (newVal === '仑传公司') {
          this.formData.no = '' // 清空合同编号
        } else {
          // 如果不是传媒中心，重新获取项目编号
          this.formData.no = this.no
        }
      },
      immediate: true
    },
    // 监听新增表单的 no
    'formData.no': {
      handler(newVal) {
        // 当 no 为空时，清空所有 lppStr 中的 projectNo
        if (!newVal && this.formData.lppStr) {
          this.formData.lppStr.forEach((item) => {
            item.projectNo = ''
          })
        }
        // 当 no 有值时，同步更新所有 lppStr 中的 projectNo
        if (newVal && this.formData.lppStr) {
          this.formData.lppStr.forEach((item) => {
            item.projectNo = newVal
          })
        }
      },
      immediate: true // 立即执行一次
    }
  },
  methods: {
    // 执行事业部列表
    async selDepartmentList() {
      const res = await selDepartmentListApi(this.selPlatformListQuery)
      console.log(res)
      this.selDepartmentLists = res.records
      // this.total = res.total;
    },
    // 平台产品列表
    async selPlatformList() {
      const res = await selPlatformListApi(this.selPlatformListQuery)
      console.log(res)
      this.selPlatformLists = res.records
      // this.total = res.total;
    },
    // 查询项目类型列表
    async selProjectTypeList() {
      const res = await selProjectTypeListApi(this.selPlatformListQuery)
      console.log(res)
      this.selProjectTypeLists = res.records
      // this.total = res.total;
    },
    // 客户类型列表查询
    async selCustomerTypeList() {
      const res = await selCustomerTypeListApi(this.selCustomerTypeListQuery)
      console.log(res)
      this.projectTypes = res.records
    },
    // 客户单位列表查询
    async selCustomerUnitList() {
      const res = await selCustomerUnitListApi(this.selCustomerTypeListQuery)
      console.log(res)
      this.customerUnits = res.records
    },
    // 项目来源列表查询
    async selProjectFromList() {
      const res = await selProjectFromListApi(this.selCustomerTypeListQuery)
      console.log(res)
      this.projectFroms = res.records
    },
    // 项目领域列表查询
    async selProjectAreaList() {
      const res = await selProjectAreaListApi(this.selCustomerTypeListQuery)
      console.log(res)
      this.projectAreas = res.records
    },
    // 项目结案列表
    async selCaseList() {
      this.loading = true
      try {
        const res = await selCaseListApi(this.selCaseListQuery)
        console.log(res)
        this.projectInputList = res.records
        this.total = res.total
      } catch (error) {
        console.error('获取列表失败:', error)
        this.$message.error('获取列表失败')
      } finally {
        this.loading = false
      }
    },
    // 办结提交
    async handleSubmit() {
      // 检查表单是否发生变化
      const currentFormData = JSON.stringify(this.formData)
      const hasChanges = currentFormData !== this.initialFormData

      const submitData = {
        content: this.formData.content || '', // 项目内容
        contractFile: this.formData.contractFile || '', // 合同文件
        cost: this.formData.cost || 0, // 执行费用
        createName: this.userId, // 操作人
        customer: this.formData.customer || '', // 客户
        customerType: this.formData.customerType || '', // 客户类型
        describe: this.formData.describe || '', // 描述
        duration: this.editdurationForSubmit || '', // 项目持续时间
        id: this.formData.id || 0, // id
        no: this.formData.no || '', // 编号
        pname: this.formData.pname || '', // 项目名称
        ptype: this.formData.ptype || '', // 项目类型: this.formData.pType || "", // 项目类型
        salesman: this.formData.salesman || '', // 项目负责人
        stockType: this.formData.stockType || '', // 存量类型
        projectFrom: this.formData.projectFrom || '', // 项目采购方式
        projectArea: this.formData.projectArea || '', // 项目领域
        money: this.formData.money || 0, // 金额
        // 确保 manageRate 是不带百分号的字符串
        manageRate: this.formData.manageRate
          ? String(this.formData.manageRate).replace('%', '')
          : '',
        operation: this.formData.operation || '', // 操作
        describe: this.formData.describe || '', // 完成概述
        lppStr: (this.formData.lppStr || []).map((item) => ({
          attribute: item.attribute || '', // 属性
          content: item.content || '', // 内容
          department: item.department || '', // 部门
          estimatedCost: Number(item.estimatedCost) || 0, // 成本
          money: Number(item.money) || 0, // 金额
          platform: item.platform || '', // 平台
          projectIP: item.projectIP || '', // 项目IP
          projectNo: item.projectNo || '', // 项目编号
          transferCompany: item.transferCompany || '', // 划转对象
          transferMoney: item.transferMoney || 0
        })),
        sign: hasChanges ? 1 : null // 根据表单是否变化添加 sign 参数
      }

      // 如果 projectFrom 为空字符串，删除该字段
      if (submitData.projectFrom === '') {
        delete submitData.projectFrom
      }

      try {
        const res = await addEndCaseApi(submitData)
        if (res.code === 1) {
          this.$message.success('办结成功')
          this.CompleteVisible = false
          this.editFileList = []
          this.selCaseList()
        } else {
          this.$message.error(res.msg || '办结失败')
        }
      } catch (error) {
        console.error('办结提交失败:', error)
        this.$message.error('办结提交失败')
      }
    },
    handleContractChange(file, fileList) {
      this.editFileList = fileList.slice(-1) // 只保留最新的一个文件
    },
    // 修改弹框的文件上传成功回调
    handleEditUploadSuccess(response, file) {
      console.log(file)
      if (response.code === 1) {
        this.$message.success('上传成功')
        this.formData.contractFile = response.data // 保存文件路径
        this.editFileList = [
          {
            name: file.name,
            url: response.data
          }
        ]
      } else {
        this.$message.error(response.msg || '上传失败')
      }
    },
    // 修改弹框的文件上传错误处理
    handleUploadError(error) {
      console.error('上传失败:', error)
      this.$message.error('文件上传失败，请重试')
    },
    // 文件上传成功时的钩子
    handleUploadSuccess(response, file, fileList) {
      console.log(response)
      if (response.code === 1) {
        this.$message.success('上传成功')
        // 可以保存文件信息到表单中
        this.formData.contractFile = response.data // 假设接口返回的是文件URL
        console.log(this.formData.contractFile)
      } else {
        this.$message.error(response.msg || '上传失败')
        // 清除文件列表
        this.editFileList = []
        this.$refs.upload.clearFiles()
      }
    },
    // 搜索
    handleQuery() {
      this.selCaseListQuery.page = 1
      this.selCaseList()
    },
    // 客户单位改变
    handleCustomerChange(val) {
      console.log(val)
      this.selCaseList()
    },
    getStatusType(status) {
      const statusMap = {
        待转案: 'warning',
        已办结: 'success',
        已驳回: 'danger'
      }
      return statusMap[status] || 'info'
    },
    // 添加项目类型
    addProjectType() {
      this.formData.lppStr.push({
        attribute: '',
        content: '',
        department: '',
        estimatedCost: 0,
        money: 0,
        platform: '',
        projectIP: '',
        projectNo: this.formData.no
      })
    },
    // 执行时间处理
    handleDurationChange(val) {
      if (!val || val.length !== 2) return

      // 格式化日期函数
      const formatDate = (date) => {
        const d = new Date(date)
        const year = d.getFullYear()
        const month = String(d.getMonth() + 1).padStart(2, '0')
        const day = String(d.getDate()).padStart(2, '0')
        return `${year}-${month}-${day}`
      }
      console.log(val[0].getTime())

      console.log(new Date(val[0]))
      // 转换开始和结束时间用于提交
      const startDate = formatDate(val[0])
      const endDate = formatDate(val[1])

      // 存储格式化后的时间字符串，但不直接赋值给 duration
      this.editdurationForSubmit = `${startDate}至${endDate}`

      console.log(this.editdurationForSubmit)
      // 保持原始时间值用于显示
      // this.formData.duration = val;
    },
    // 处理文件下载
    handleFileDownload(url) {
      if (!url) {
        this.$message.warning('文件链接不存在')
        return
      }

      // 拼接完整的下载地址
      const baseUrl = 'http://192.168.11.2:8081'
      const fullUrl = `${baseUrl}${url}`

      // 获取文件名 - 截取_后面的部分
      const fileName = url.split('_').pop()
      console.log(fullUrl)

      try {
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = fullUrl
        link.setAttribute('download', fileName) // 使用新的文件名
        document.body.appendChild(link)

        link.click()

        document.body.removeChild(link)
      } catch (error) {
        console.error('下载失败:', error)
        this.$message.error('下载失败，请重试')
      }
    },
    // 项目状态改变
    handleProjectStatusChange(val) {
      console.log(val)
      if (val === '') {
        this.selCaseListQuery.status = 1
      }
      this.selCaseList()
    },
    // 办结
    async handleComplete(row) {
      this.no = row.no
      if (row.duration && typeof row.duration === 'string') {
        // 只有当 duration 是字符串时才进行分割
        const [startDate, endDate] = row.duration.split('至')
        row.duration = [startDate, endDate]
        this.editdurationForSubmit = `${startDate}至${endDate}`
      }

      // 处理合同文件回显
      if (row.contractFile) {
        this.editFileList = [
          {
            name: row.contractFile.split('_').pop(),
            url: row.contractFile
          }
        ]
      }

      // 构建初始表单数据，与 submitData 结构保持一致
      const initialData = {
        content: row.content || '',
        contractFile: row.contractFile || '',
        cost: row.cost || 0,
        createName: this.userId, // 创建人
        customer: row.customer || '',
        customerType: row.customerType || '',
        describe: row.describe || '',
        duration: row.duration || '',
        id: row.id || 0,
        no: row.no || '',
        pname: row.pname || '',
        ptype: row.ptype || '',
        salesman: row.salesman || '',
        stockType: row.stockType || '',
        projectFrom: row.projectFrom || '',
        projectArea: row.projectArea || '',
        money: row.money || 0,
        manageRate: String(row.manageRate) + '%', // 添加百分号
        operation: row.operation || '',
        describe: row.describe || '',
        lppStr: (row.list || []).map((item) => ({
          attribute: item.attribute || '',
          content: item.content || '',
          department: item.department || '',
          estimatedCost: Number(item.estimatedCost) || 0,
          money: Number(item.money) || 0,
          platform: item.platform || '',
          projectIP: item.projectIP || '',
          projectNo: item.projectNo || '',
          transferCompany: item.transferCompany || '',
          transferMoney: item.transferMoney || 0
        }))
      }

      this.formData = { ...initialData }
      // 存储初始状态
      this.initialFormData = JSON.stringify(initialData)
      this.CompleteVisible = true
    },
    // 重置查询参数
    resetQuery() {
      this.selCaseListQuery = {
        page: 1,
        pageSize: 10,
        customer: '',
        no: '',
        PName: '',
        status: 1,
        userId: this.$store.getters.userId // 用户ID
      }
      this.selCaseList()
    },
    // 分页
    handleSizeChange(val) {
      this.selCaseListQuery.pageSize = val
      this.selCaseList()
    },
    // 当前页
    handleCurrentChange(val) {
      this.selCaseListQuery.page = val
      this.selCaseList()
    },
    // 格式化创建时间
    formatCreateTime(time) {
      if (!time) return ''
      const secondColonIndex = time.indexOf(':', time.indexOf(':') + 1)
      return time.substring(0, secondColonIndex)
    },
    // 删除项目类型
    removeProjectType(index) {
      console.log(index)
      this.formData.lppStr.splice(index, 1)
    },
    // 封装获取项目状态
    getProjectStatus(status, prStatus) {
      if (status === null || status === undefined) return ''
      const statusNum = Number(status)
      const prStatusNum = Number(prStatus)
      if ((statusNum === 5 || statusNum === 6) && prStatusNum === 6) {
        return '已结案'
      } else if (prStatusNum > 1 && prStatusNum <= 5) {
        return '待评审'
      } else if (prStatusNum === 1) {
        return '待结案'
      } else if (prStatusNum === -1) {
        return '已驳回'
      }
      return ''
    },
    // 封装获取项目状态类型
    getProjectStatusType(status, prStatus) {
      if (status === null || status === undefined) return ''
      const statusNum = Number(status)
      const prStatusNum = Number(prStatus)
      if ((statusNum === 5 || statusNum === 6) && prStatusNum === 6) {
        return 'success'
      } else if (prStatusNum > 1 && prStatusNum <= 5) {
        return 'warning'
      } else if (prStatusNum === 1) {
        return 'warning'
      } else if (prStatusNum === -1) {
        return 'danger'
      }
      return 'info'
    },
    // 点击下载
    getFileName(url) {
      if (!url) return ''
      // 截取_后面的部分作为文件名
      console.log(url.split('_').pop())
      return url.split('_').pop()
    },
    // 下载合同
    handleDownload(row) {
      if (!row.contractFile) return
      window.open(process.env.VUE_APP_BASE_API + row.contractFile)
    },
    // 查看
    handleDetail(row) {
      this.detailDialogVisible = true
      this.projectDetail = row
      console.log(this.projectDetail)
    },
    // 处理文件预览
    async handlePreview() {
      if (!this.formData.contractFile) {
        this.$message.warning('文件链接不存在')
        return
      }
      try {
        // 获取预览链接
        const res = await selFileUrlApi(this.formData.contractFile)
        console.log(res)
        if (res.code === 1 && res.data) {
          // 在新窗口中打开预览链接
          window.open(res.data, '_blank')
        } else {
          this.$message.error(res.msg || '获取预览链接失败')
        }
      } catch (error) {
        console.error('预览失败:', error)
        this.$message.error('预览失败，请重试')
      }
    },
    // 处理失焦事件
    handleEditManageRateBlur(e) {
      const inputValue = e.target.value
      if (inputValue) {
        // 移除百分号和空格
        const value = String(inputValue).replace(/%|\s/g, '')

        if (!isNaN(value)) {
          // 创建新选项
          const newOption = {
            label: `${value}%`,
            value: value
          }

          // 检查是否已存在该选项
          if (!this.manageRateOptions.some((item) => item.value === value)) {
            this.manageRateOptions.push(newOption)
          }

          // 设置选中值
          this.formData.manageRate = value
        }
      }
    },

    // 处理选择改变
    handleEditManageRateChange(val) {
      if (val) {
        // 移除百分号
        const value = String(val).replace(/%/g, '')
        this.formData.manageRate = value
      }
    },
    // 添加打印方法
    handlePrint() {
      if (this.selectionRow.length === 0) {
        this.$message.warning('请选择要打印的项目')
        return
      }
      if (this.selectionRow.length > 1) {
        this.$message.warning('请选择单条记录打印')
        return
      }
      // 打开详情弹窗
      this.handleDetail(this.selectionRow[0])
    },

    // handlePrintDetail() {
    //   try {
    //     window.jQuery("#printArea").print({
    //       title: "",
    //       stylesheet: null,
    //       deferred: window.jQuery.Deferred().done(function () {
    //         console.log("打印完成");
    //       }),
    //     });
    //   } catch (error) {
    //     console.error("打印失败:", error);
    //     this.$message.error("打印失败，请重试");
    //   }
    // },
    // 判断办结按钮是否禁用
    isCompleteButtonDisabled(row) {
      const status = Number(row.status)
      const prStatus = Number(row.prStatus)

      // 当项目状态为待评审(prStatus > 1 && prStatus <= 5)或已结案(prStatus === 6)时禁用按钮
      return (prStatus > 1 && prStatus <= 5) || prStatus === 6
    },
    // 处理打印
    handlePrint() {
      // 验证打印区域是否存在
      const printArea = document.getElementById('printArea')
      if (!printArea) {
        this.$message.warning('打印区域未找到，请确保数据已加载')
        return
      }

      // 调用打印方法
      this.$print(this.printObj)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.operation-container {
  margin-bottom: 20px;
}

.operation-container .el-button {
  margin-right: 10px;
}

.search-wrapper {
  margin-bottom: 20px;
}

.filter-trigger .el-icon-arrow-down {
  margin-left: 5px;
  transition: transform 0.3s;
}

.filter-trigger .el-icon-arrow-down.is-reverse {
  transform: rotate(180deg);
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 确保表格内容不会被截断 */
.el-table .cell {
  white-space: nowrap;
}

.form-row {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 15px;
}

:deep(.el-form-item) {
  margin-right: 15px;
  margin-bottom: 0;
}

:deep(.el-form-item__label) {
  color: #606266;
}

:deep(.el-form-item__content) {
  width: 180px;
}

:deep(.el-input),
:deep(.el-select) {
  width: 100%;
}

/* 确保select的宽度也是180px */
:deep(.el-select .el-input) {
  width: 100%;
}

/* 重置 form-item 的样式 */
:deep(.el-form--inline .el-form-item) {
  display: flex;
  align-items: center;
}

:deep(.el-form-item__label) {
  float: none;
  line-height: 1;
  padding: 0 8px 0 0;
}

:deep(.el-form-item__content) {
  margin-left: 0 !important;
  line-height: 1;
}

/* 按钮样式 */
.el-button {
  margin-left: 10px;
}

/* 输入框样式 */
:deep(.el-input__inner) {
  border-radius: 2px;
}

.project-type-section {
  margin-top: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-left: 12px;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background-color: #1e6ced;
  border-radius: 2px;
}

.project-type-section {
  margin-top: 20px;
}

.dialog-footer {
  /* text-align: center; */
}

.detail-dialog {
  .el-dialog__header {
    background-color: #f0f0f0 !important; /* 灰色背景 */
    text-align: center !important; /* 文字居中 */
    padding: 15px 20px;
  }
}

:deep(.el-dialog__body) {
  padding: 20px 30px;
}

:deep(.el-form-item__label) {
  font-weight: normal;
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-table .el-input) {
  width: 100%;
}

:deep(.el-table .el-select) {
  width: 100%;
}

.upload-section {
  margin: 20px 0;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-left: 12px;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background-color: #1e6ced;
  border-radius: 2px;
}

.upload-box {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  text-align: center;
  padding: 20px;
  background-color: #fafafa;
}

:deep(.el-upload-dragger) {
  width: 100%;
  height: 180px;
}

:deep(.el-upload__text) {
  color: #606266;
  font-size: 14px;
  margin-top: 10px;
}

:deep(.el-upload__text em) {
  color: #409eff;
  font-style: normal;
}

:deep(.el-upload__tip) {
  font-size: 12px;
  color: #909399;
  margin-top: 10px;
}

/* 备注文本域样式 */
:deep(.el-textarea__inner) {
  min-height: 80px;
}

/* 滚动条样式优化 */
.dialog-content-wrapper {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c0c4cc;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background: #f5f7fa;
  }
}

/* 确保表格内容不会被截断 */
.el-table .cell {
  white-space: nowrap;
}

/* 调整按钮样式 */
.el-button--text {
  padding: 0;
  margin: 0;
}

.collapse-header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #303133;

  .view-btn {
    color: #409eff;
    font-size: 14px;
    cursor: pointer;
  }
}

.detail-content {
  background: #fff;
  // border: 2px solid #ebeef5;
  // margin-top: 20px;

  .contract-no {
    color: #1b86ee;
    font-size: 16px;
    margin: 20px;
  }
}

.project-type {
  margin-top: 20px;

  .type-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 4px solid #409eff;
  }

  :deep(.el-table) {
    th {
      background-color: #f5f7fa;
      color: #606266;
      padding: 8px 0;
      font-weight: normal;
    }

    td {
      padding: 8px;
      color: #606266;
    }

    &::before,
    &::after {
      background-color: #ebeef5;
    }

    .el-table__cell {
      border-color: #ebeef5;
    }
  }

  .contract-info {
    // margin-top: 40px;
    // border: 2px solid #ebeef5;
    border-radius: 4px;

    .info-item {
      display: flex;
      border-bottom: 1px solid #ebeef5;

      &:last-child {
        border-bottom: none;
      }

      .info-label {
        width: 160px;
        padding: 12px;
        background-color: #f5f7fa;
        color: #606266;
        font-size: 14px;
        border-right: 1px solid #ebeef5;
      }

      .info-content {
        flex: 1;
        padding: 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
        color: #606266;
        font-size: 14px;

        &:has(.download-link) {
          justify-content: space-between;
        }

        .download-link {
          color: #409eff;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }

        .button-group {
          .el-button {
            margin-left: 10px;
          }
        }
      }
    }
  }
}

.contract-info {
  // margin-top: 40px;
  // border: 2px solid #ebeef5;
  border-radius: 4px;

  .info-item {
    display: flex;
    border-bottom: 1px solid #ebeef5;

    &:last-child {
      border-bottom: none;
    }

    .info-label {
      width: 120px;
      padding: 12px;
      background-color: #f5f7fa;
      color: #606266;
      font-size: 14px;
      border-right: 1px solid #ebeef5;
    }

    .info-content {
      flex: 1;
      padding: 12px;
      min-height: 44px;
      display: flex;
      align-items: center;
      color: #606266;
      font-size: 14px;

      &:has(.download-link) {
        justify-content: space-between;
      }

      .download-link {
        color: #409eff;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }

      .button-group {
        .el-button {
          margin-left: 10px;
        }
      }
    }
  }
}

.type-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  // margin-bottom: 20px;
  padding-left: 10px;
  border-left: 4px solid #409eff;
}

.contract-upload-section {
  margin: 20px 0;

  .section-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
    color: #303133;
  }

  .upload-box {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:hover {
      border-color: #409eff;
    }
  }
}

.section-title {
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-left: 12px;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background-color: #1e6ced;
  border-radius: 2px;
}

.contract-upload-section {
  margin: 20px 0;

  .section-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
    color: #303133;
  }

  .upload-box {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:hover {
      border-color: #409eff;
    }
  }
}

.contract-info {
  // margin-top: 40px;
  // border: 2px solid #ebeef5;
  border-radius: 4px;

  .info-item {
    display: flex;
    border-bottom: 1px solid #ebeef5;

    &:last-child {
      border-bottom: none;
    }

    .info-label {
      width: 130px;
      padding: 12px;
      background-color: #f5f7fa;
      color: #606266;
      font-size: 14px;
      border-right: 1px solid #ebeef5;
    }

    .info-content {
      flex: 1;
      padding: 12px;
      min-height: 44px;
      display: flex;
      align-items: center;
      color: #606266;
      font-size: 14px;

      &:has(.download-link) {
        justify-content: space-between;
      }

      .download-link {
        color: #409eff;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }

      .button-group {
        .el-button {
          margin-left: 10px;
        }
      }
    }
  }
}

/* 添加打印样式 */
@media print {
  #printArea {
    width: 100% !important;

    .el-table {
      width: 100% !important;

      /* 表格容器样式 */
      .el-table__inner-wrapper,
      .el-table__header-wrapper,
      .el-table__body-wrapper {
        width: 100% !important;
      }

      /* 表格主体样式 */
      .el-table__header,
      .el-table__body {
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
      }

      /* 单元格样式 */
      .el-table__cell {
        border: 1px solid #dcdfe6 !important;
        padding: 8px !important;
      }

      /* 表头样式 */
      .el-table__header th {
        background-color: #f5f7fa !important;
        font-weight: bold !important;
      }
    }
  }

  /* 隐藏不需要打印的元素 */
  .el-button,
  .dialog-footer,
  .el-pagination {
    display: none !important;
  }
}

.info-section {
  // padding: 20px;
  background: #fff;

  .info-row {
    display: flex;
    margin-bottom: 1px;

    &.full-width {
      .info-label {
        width: 180px;
        color: black;
        font-weight: bold;
      }
      .info-content {
        flex: 1;
        color: black;
      }
    }

    &.three-cols {
      .info-col {
        flex: 1;
        margin-right: 1px;
        &:last-child {
          margin-right: 0;
        }
      }
    }

    .info-col {
      display: flex;
      flex: 1;
      margin-right: 1px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .info-label {
    width: 100px;
    // padding: 12px 20px;
    padding: 12px;
    background-color: #f5f7fa;
    color: black;
    font-size: 14px;
    border: 1px solid #ebeef5;
    display: flex;
    align-items: center;
  }

  .info-content {
    padding: 12px 20px;
    min-height: 44px;
    border: 1px solid #ebeef5;
    border-left: none;
    display: flex;
    align-items: center;
    color: black;
    font-size: 14px;
    flex: 1;
  }
}
</style>
